<template>
	<view class="page page-mine flex--column">
		<view class="section sec-user-info">
			<view class="basic-info flex">
				<image :src="userInfo.avatar" class="avatar"></image>
				<view class="info">
					<view class="info__main flex">
						<text class="name">{{ userInfo.name }}</text>
					</view>
					<view class="info__phone">{{userInfo.phone}}</view>
				</view>
				<image class="icon-arrow--right" src="/static/icon/icon-arrow--right.png"></image>
			</view>
			<view class="job-info flex">
				<view class="item" v-for="(item, index) in jobInfoList" :key="index">
					<view class="item__number">{{ item.total }}</view>
					<view class="item__title">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view class="section sec-func-list">
			<view class="func-item flex" :data-route="item.route" @tap="onTapFuncItem" v-for="(item, index) in funcList" :key="index">
				<image class="icon" :src="item.icon"></image>
				<text class="title">{{ item.title }}</text>
				<image class="icon-arrow--right" src="/static/icon/icon-arrow--right.png"></image>
			</view>
			<view class="func-item flex" @click="tolngin">
				<image class="icon" src="/static/icon/tcdl.png"></image>
				<text class="title">退出登录</text>
				<image class="icon-arrow--right" src="/static/icon/icon-arrow--right.png"></image>
			</view>
		</view>
		<uv-tabbar :value="value" :fixed="true" @change="index=>value = index">
			<uv-tabbar-item @click="click('/pages/staff/index/index')" text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item @click="click('/pages/staff/mine/mine')" text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				userInfo: {
					avatar: '',
					name: '',
					phone: ''
				},
				jobInfoList: [{
						id: 'lostPunchIn',
						title: '考勤缺卡',
						total: 1
					}],
				funcList: [{
						id: 'attendance',
						icon: '/static/icon/func-attendance.png',
						title: '我的考勤',
						route: '/pages/staff/attendance/attendance'
					}]
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			tolngin() {
				uni.removeStorageSync("staffInfo");
				uni.redirectTo({
					url: '/pages/staff/login/login'
				});
			},
			getUserInfo() {
				let sf = uni.getStorageSync('staffInfo');
				this.userInfo = {
					avatar: sf.avatar,
					name: sf.username,
					phone: sf.phone
				};
			},
			onTapFuncItem(e) {
				const route = e.currentTarget.dataset.route;
				if (route) {
					uni.navigateTo({
						url: route
					});
				}
			},
			click(e) {
				uni.navigateTo({
					url: e
				});
			}
		}
	};
</script>

<style>
	.page-mine {
		min-height: 100%;
		background-color: #fafafa;
	}

	.page-mine .section {
		width: 100%;
		padding: 20rpx 40rpx 40rpx;
		background-color: #ffffff;
	}

	.sec-user-info .basic-info {
		position: relative;
		justify-content: flex-start;
	}

	.basic-info .avatar {
		border-radius: 50%;
		width: 130rpx;
		height: 130rpx;
		background: #fafafa;
	}

	.basic-info .info {
		margin-left: 24rpx;
		line-height: 38rpx;
		font-size: 32rpx;
	}

	.info__main .name {
		color: #000000;
	}

	.basic-info .info .info__phone {
		margin-top: 20rpx;
		color: #333333;
	}

	.basic-info .icon-arrow--right {
		position: absolute;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 14rpx;
		height: 24rpx;
	}

	.job-info {
		width: 670rpx;
		height: 180rpx;
		margin-top: 18rpx;
		background-image: linear-gradient(90deg, rgb(3, 207, 255) 0%, rgb(55, 163, 254) 100%);
		border-radius: 20rpx;
		color: #fff;
	}

	.job-info .item {
		flex: 1;
		text-align: center;
		line-height: 1;
	}

	.job-info .item .item__number {
		font-size: 50rpx;
	}

	.job-info .item .item__title {
		margin-top: 12rpx;
		font-size: 28rpx;
	}

	.page-mine .section.sec-func-list {
		flex-grow: 1;
		margin-top: 20rpx;
		padding-top: 14rpx;
		padding-bottom: 0;
	}

	.sec-func-list .func-item {
		position: relative;
		justify-content: flex-start;
		padding: 21rpx 0 24rpx 37rpx;
		border-bottom: 2rpx solid #f7f7f7;
	}

	.sec-func-list .func-item .icon {
		width: 42rpx;
		height: 44rpx;
	}

	.sec-func-list .func-item .title {
		margin-left: 20rpx;
		line-height: 34rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.sec-func-list .func-item .icon-arrow--right {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 14rpx;
		height: 24rpx;
	}
</style>